<template>
  <div class='main-container'>
    <div class="panel-top">
      <div class="panel-title">
        <!-- 拜城水文自动测报系统 -->
        {{ "1111111111111" }}
      </div>
      <div class="ywxt" @click="goToDashboard($router.push('/dashboard'))">业务系统</div>
      <div class="username-box">
        <img class="user-img" :src="require('@/assets/images/dsk/user_bg.png')" />
        <el-dropdown @command="handleCommand">
          <span class="username">{{ userInfo.userName }}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>


    <div class="panel-left-bg"></div>
    <div class="panel-right-bg"></div>

    <div class="panel-left">
      <div class="panel-left-1">
        <div class="panel-title-common">
          <div class="title">今日降水量</div>
        </div>
        <div class="panel-context-common">
          <PictorialBarChart :width="'100%'" height="100%" :x-axis-data="pptnChartData.xData"
            :chart-data="pptnChartData.chartData" :background-color="'#031d33'" backgroundColor="rgba(8,34,92, 0.1)" />
        </div>
      </div>
      <div class="panel-left-2">
        <div class="panel-title-common">
          <div class="title">数据告警</div>
        </div>
        <div class="panel-context-common">
          <el-table :data="warnData" height="100%" style="width: 100%;" class="custom-table"
            :cell-style="tableCellStyle">
            <el-table-column prop="stnm" label="测站" align="center"></el-table-column>
            <el-table-column prop="tm" label="时间" width="120" :formatter="formatTm" align="center"></el-table-column>
            <el-table-column prop="z" label="水位" align="center"></el-table-column>
            <el-table-column prop="q" label="流量" align="center"></el-table-column>
            <el-table-column prop="wtype" label="告警状态" align="center">
              <template slot-scope="scope">
                <span :style="{ color: getWtypeText(scope.row.wtype) }">{{ scope.row.wtype }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="panel-left-3">
        <div class="panel-title-common">
          <div class="title">值班人员</div>
        </div>
        <div class="panel-context-common">
          <div class="context-box">
            <div class="context-item" v-for="item in zbryList" :key="item.id">
              <div class="user-img">
                <img :src="require('@/assets/images/dsk/user_bg.png')" />
              </div>
              <div style="width: 3.82vw;">{{ item.nickName }}</div>
              <div style="width: 6.42vw;">{{ item.phonenumber }}</div>
              <div style="width: 5.42vw;">{{ getTypeText(item.type) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-right">
      <div class="panel-right-1">
        <div class="panel-title-common">
          <div class="title">断面示意图</div>
        </div>
        <div class="panel-context-common">
          <Dmsyt :chartData="dmtChartData" />
        </div>
      </div>
      <div class="panel-right-2">
        <div class="panel-title-common">
          <div class="title">设备在线情况</div>
        </div>
        <div class="panel-context-common">
          <el-table :data="sbzxData" height="100%" style="width: 100%;" class="custom-table"
            :cell-style="tableCellStyle">
            <el-table-column prop="stnm" label="测站" align="center"></el-table-column>
            <el-table-column prop="cardid" label="设备编码" align="center"></el-table-column>
            <el-table-column prop="basis" label="检测要素" align="center"></el-table-column>
            <el-table-column prop="status" label="设备状态" align="center">
              <template slot-scope="scope">
                <span :style="{ color: getStatusText(scope.row.status) }">{{ scope.row.status }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="panel-right-3">
        <div class="panel-title-common">
          <div class="title">水位流量关系曲线</div>
        </div>
        <div class="panel-context-common">
          <Swllgxqx :chartData="swllgxqxChartData" />
        </div>
      </div>
    </div>

    <div class="panel-center">
      <MnbMap ref="mnbMap" @viewLoaded='viewLoaded' class='argisMap'></MnbMap>
      <div class="stbprp-select">
        站点选择
        <el-select v-model="stcd" @change="stcdChange" popper-class="stbprp-select-popper" size="mini" placeholder="请选择"
          style="width: 140px;margin-left: 3px;">
          <el-option v-for="item in stcdList" :key="item.stcd" :label="item.stnm" :value="item.stcd"></el-option>
        </el-select>
      </div>
    </div>

    <div class="panel-center-bottom">
      <div class="panel-title-common" style="color: rgba(255, 255, 255, 1);">
        <div class="title">水位流量过程线</div>
      </div>
      <div class="panel-context-common">
        <Swllgcx :chartData="swllgcxChartData" />
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PictorialBarChart from '@/components/PictorialBarChart'
import Dmsyt from '@/components/Dmsyt'
import Swllgxqx from '@/components/Swllgxqx'
import Swllgcx from '@/components/Swllgcx'
import MnbMap from '@components/MnbMap'
import moment from 'moment'
export default {
  components: {
    MnbMap, PictorialBarChart, Dmsyt, Swllgxqx, Swllgcx
  },
  data() {
    return {
      isReadly: false,
      stcd: "11329410",
      stcdList: [],
      pptnChartData: {
        xData: [],
        chartData: [],
      },
      //断面图
      dmtChartData: {},
      //水位流量关系曲线
      swllgxqxChartData: [],
      //值班列表
      zbryList: [],
      //告警列表
      warnData: [],
      //设备列表
      sbzxData: [],
      //水位流量过程线
      swllgcxChartData: []


    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  async created() {
    this.getStcdOptions()
    //获取获取定时器 5分钟轮询一次
    this.timePollingTimer = setInterval(() => {
      console.log(
        this.$moment(new Date()).format("YYYY-MM-DD HH:mm"),
        "数据轮询"
      );
      this.timePollingMethods();
    }, 1000 * 60 * 10); //* 60 * 5
    this.timePollingMethods();
  },
  mounted() {

  },
  //销毁定时器
  beforeDestroy() {
    clearInterval(this.timePollingTimer);
  },
  methods: {
    async timePollingMethods() {
      this.getLastPptnList()
      this.getZbryList()
      this.getGcxList()
      this.getGxqxList()
      this.getDmtChartData()
      this.getOnlineStatus()
      this.getWtypeList()
    },
    handleCommand(command) {
      if (command == 'loginout') {
        this.$store.dispatch('user/logOut').then(() => {
          this.$router.push('/login')
        })
      }
    },
    async viewLoaded(map, view) {
      this.map = map
      this.view = view
      view.on('click', (event) => {
        view.hitTest(event.screenPoint).then((responses) => {
          if (responses.results.length > 0) {
            console.log('responses.results[0]', responses.results[0])
            const data = responses.results[0].graphic.attributes
            if (data != null) {
              const obj = JSON.parse(data)
              this.openView(obj)
            }
          }
        })
      })
      console.log("地图加载完成", map, view)
      this.stcdList.length

      var tme = setInterval(() => {
        if (this.stcdList.length > 0) {
          this.createSttpLayerPoint()
          clearInterval(tme)
        }
      }, 300);


    },
    openView(obj) {
    },
    getStcdOptions() {
      this.$request({
        url: 'baseApi/st_stbprp_b/list',
        method: 'get',
        params: {
        }
      }).then((res) => {
        if (res.code === 200) {
          this.stcdList = res.data
        }
      })
    },
    getLastPptnList() {
      this.$request({
        method: 'post',
        url: 'baseApi/st_pptn_r/getChartData',
        data: {
        },
        headers: {
          'Content-Type': 'application/json; charset=UTF-8'
        }
      })
        .then((res) => {
          if (res.code == 200) {
            this.pptnChartData = {
              xData: res.data.map(item => item.stnm.replace(/\s+/g, '')),
              chartData: res.data.map(item => item.drp),
            }
          }
        })
    },

    getZbryList() {
      this.$request({
        method: 'get',
        url: 'baseApi/cus_duty/getDayList',
        params: {
          date: moment().format('YYYY-MM-DD')
        }
      }).then((res) => {
        if (res.code === 200) {
          this.zbryList = res.data;
        }
      })
    },
    getGcxList() {
      this.$request({
        method: 'get',
        url: 'baseApi/st_river_r/getList',
        params: {
          // btm: btm,
          // etm: etm
          stcd: this.stcd,
          btm: '2021-01-01 00:00',
          etm: '2021-02-01 23:59'
        }
      }).then((res) => {
        if (res.code === 200) {
          this.swllgcxChartData = res.data
        }
      })
    },
    getGxqxList() {
      this.$request({
        method: 'get',
        url: 'baseApi/st_zqrl_b/getLastBgtmList',
        params: {
          stcd: this.stcd,
        }
      }).then((res) => {
        if (res.code === 200) {
          this.swllgxqxChartData = res.data
        }
      })
    },
    getDmtChartData() {
      this.$request({
        method: 'get',
        url: 'baseApi/st_rvsect_b/getDmtChartData',
        params: {
          stcd: this.stcd,
        }
      }).then((res) => {
        if (res.code === 200) {
          this.dmtChartData = res.data
        }
      })
    },
    getOnlineStatus() {
      this.$request({
        method: 'get',
        url: 'baseApi/cus_orimes/getOnlineStatus',
        params: {
        }
      }).then((res) => {
        if (res.code === 200) {
          this.sbzxData = res.data
        }
      })
    },
    getWtypeList() {
      this.$request({
        method: 'get',
        url: 'baseApi/st_river_r/getWtypeList',
        params: {
        }
      }).then((res) => {
        if (res.code === 200) {
          this.warnData = res.data
        }
      })
    },
    createSttpLayerPoint() {
      this.removeLayerById("ponit-arr-sttp");
      const data = [...this.stcdList];
      window.require(
        [
          "esri/Map",
          "esri/views/MapView",
          "esri/Graphic",
          "esri/geometry/Point",
          "esri/layers/GraphicsLayer",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/TextSymbol",
          "esri/PopupTemplate",
        ],
        (
          Map,
          MapView,
          Graphic,
          Point,
          GraphicsLayer,
          SimpleMarkerSymbol,
          TextSymbol,
          PopupTemplate
        ) => {
          let pictureMarkerSymbol = {
            type: "picture-marker",
            url: "",
            width: 14,
            height: 14,
            // angle: 90
          };
          //创建点图层
          let pointGraphicsLayer = new GraphicsLayer({
            id: "ponit-arr-sttp",
            title: "point点集合",
            graphics: [],
          });

          for (let i = 0; i < data.length; i++) {
            const point = {
              //Create a point
              type: "point",
              longitude: data[i].lgtd,
              latitude: data[i].lttd,
              data: data[i],
            };
            const pointGraphic = new Graphic({
              geometry: point,
              symbol: {
                ...pictureMarkerSymbol,
                url: require("@/assets/images/swz.png"),
              },
              attributes: JSON.stringify(data[i]),
            });
            pointGraphicsLayer.add(pointGraphic);
          }
          this.map.add(pointGraphicsLayer);

          let textLayer = new GraphicsLayer({
            id: "ponit-arr-sttp-textSymbol",
            title: "point点集合",
          });
          this.map.add(textLayer);
          data.forEach((ele) => {
            let point = new Point({
              x: Number(ele.lgtd),
              y: Number(ele.lttd),
            });
            let symbol = {
              color: "#007ac2",
              xoffset: 0,
              yoffset: 10,
              font: {
                size: 12,
                weight: "bold",
              },
            };
            symbol["text"] = ele.stnm;
            let textSymbol = new TextSymbol({ ...symbol });
            let graphic = new Graphic({
              geometry: point,
              symbol: textSymbol,
            });
            textLayer.add(graphic);
          });
        }
      );
    },
    stcdChange(stcd) {
      let item = this.stcdList.find((ele) => ele.stcd == stcd);
      this.view.goTo({
        center: [item.lgtd, item.lttd],
        zoom: 12
      }, {
        duration: 1000 // 动画过渡时间（毫秒）
      })
      this.getGcxList()
      this.getGxqxList()
      this.getDmtChartData()
    },

    getTypeText(type) {
      const typeMap = {
        day: '白班',
        night: '夜班',
        rest: '休息'
      }
      return typeMap[type] || type
    },
    // 删除特定id的图层
    removeLayerById(id) {
      var layer = this.map.findLayerById(id)
      if (layer) {
        this.map.remove(layer)
      }
    },

    getStatusText(status) {
      if (status == '正常') {
        return '#0ae66d'
      } else if (status == '超24小时') {
        return '#e6e20a'
      } else if (status == '超72小时') {
        return '#e60a0a'
      }
    },
    getWtypeText(wtype) {
      if (wtype == '正常') {
        return '#0ae66d'
      } else if (wtype == '超警戒') {
        return '#e6e20a'
      } else if (wtype == '超保证') {
        return '#e60a0a'
      }
    },

    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      let style = {
        'height': '1rem',
        'font-size': '1.5vh',
        'line-height': '1rem',
        'border': 'none',
        'color': '#ffffff',
      };
      style.background = 'rgba(0, 0, 0, 0)';
      // 根据列索引设置样式
      if (columnIndex === 0) {
        style.color = '#ffffff';
      } else {
        style.color = '#027CFF';
      }
      return style;
    },
    formatTm(row, column, cellValue, index) {
      return moment(cellValue).format('MM/DD HH:mm')
    }
  },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式
.main-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: url("~@assets/images/dsk/bg_1.png") no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
}

.ywxt {
  position: absolute;
  top: 1vw;
  right: 10vw;
  width: 160px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: url("~@assets/images/btn-bg.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;

  &:hover {
    color: #f2f537;
  }
}

.panel-top {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 6.8519vh;
  background: url("~@assets/images/dsk/topbg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  // justify-content: center;

  .panel-title {
    margin-top: 0.6vh;
    width: 22.24vw;
    height: 4.19vh;
    font-size: 1.3vw;
    font-weight: normal;
    font-family: YouSheTitle, YouSheTitle-Normal;
    text-align: CENTER;
    color: #ffffff;
    letter-spacing: 0.21vw;
  }

  .username-box {
    z-index: 2;
    position: absolute;
    display: flex;
    place-content: center;
    place-items: center;
    top: 3vh;
    right: 3vw;

    .user-img {
      width: 1.6vw;
      height: 3.2vh;
    }

    .username {
      margin-left: 0.4167vw;
      font-size: 0.7292vw;
      font-family: Microsoft YaHei, Microsoft YaHei-Normal;
      font-weight: normal;
      text-align: LEFT;
      color: #ffffff;
    }
  }
}

.panel-left-bg {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 10px;
  width: 20%;
  height: 100%;
  background: url("~@assets/images/dsk/left_blockbg.png") no-repeat;
  background-size: 100% 100%;
}

.panel-right-bg {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 10px;
  width: 20%;
  height: 100%;
  background: url("~@assets/images/dsk/left_blockbg_1.png") no-repeat;
  background-size: 100% 100%;
}


.panel-left {
  z-index: 2;
  position: absolute;
  top: 6.9629vh;
  left: 2.417vw;
  height: 90.5vh;
  width: 24.0833vw;
  display: flex;
  flex-direction: column;
  gap: 0.6vw;

  .panel-left-1 {
    width: 100%;
    height: 35%;
  }

  .panel-left-2 {
    width: 100%;
    height: 30%;
  }

  .panel-left-3 {
    width: 100%;
    height: 35%;

    .context-box {
      height: 100%;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      place-content: flex-start;
      place-items: flex-start;
      gap: 0.3vw;
      flex-shrink: 0;

      .context-item {
        height: 4.56vh;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: row;
        place-content: center;
        flex-shrink: 0;
        font-size: 0.8vw;
        padding: 1.11vh 0.83vw;
        background: linear-gradient(90deg,
            rgba(67, 154, 236, 0.15) 0%,
            rgba(21, 50, 76, 0.15) 100%);

        .user-img {
          width: 2.6vw;
          height: 5.56vh;
          display: flex;
          // justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

.panel-right {
  z-index: 2;
  position: absolute;
  top: 6.9629vh;
  right: 1.0417vw;
  height: 90.5vh;
  width: 24.0833vw;
  display: flex;
  flex-direction: column;
  gap: 0.6vw;

  .panel-right-1 {
    width: 100%;
    height: 35%;
  }

  .panel-right-2 {
    width: 100%;
    height: 30%;
  }

  .panel-right-3 {
    width: 100%;
    height: 35%;


  }
}

.panel-center {
  position: absolute;
  top: 7.6629vh;
  left: 27vw;
  width: 47.2083vw;
  height: 53.9444vh;
  border-radius: 0px;
  // background-color: rgb(3, 27, 13);
  // background: url("~@assets/images/dsk/videobg.png") no-repeat;
  // background-size: 100% 100%;
}

.panel-center-bottom {
  position: absolute;
  top: 61.9074vh;
  left: 27vw;
  width: 47.2083vw;
  height: 34.278vh;
}

.panel-title-common {
  background: url("~@assets/images/dsk/titbg.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 3.7037vh;
  display: flex;
  place-content: space-between;

  .title {
    margin-left: 1.5625vw;
    line-height: 3.7037vh;
    font-size: 0.7875vw;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: normal;
    text-align: LEFT;
    color: #ffffff;
    font-family: "HarmonyOS Sans SC";
    font-weight: 700;
    letter-spacing: 5%;
  }

  .des {
    line-height: 3.7037vh;
    margin-right: 1.0417vw;
    color: rgba(255, 255, 255, 1);
    font-family: "HarmonyOS Sans SC";
    font-weight: 400;
    font-size: 12px;
  }
}

.panel-context-common {
  position: relative;
  padding: 0.9259vh;
  height: calc(100% - 5.5656vh);
}

::v-deep .custom-table.el-table {
  background: none !important;

  .el-table__cell.gutter {
    background: transparent !important;
  }

  tr {
    background-color: transparent;
  }
}

::v-deep.custom-table.el-table.custom-table.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: none !important;
}

::v-deep.custom-table.el-table.custom-table.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: none !important;
}

::v-deep.custom-table.el-table .el-table__header-wrapper th {
  background: transparent;
  color: #fff;
}

::v-deep.custom-table.el-table th.el-table__cell.is-leaf {
  border-bottom: 0px solid #EBEEF5;
}

.adfafdaf {
  color: #e60a0a;
}
</style>

<style scoped>
.stbprp-select {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 3px;
  background: #0000007a;
  width: fit-content;
}

.stbprp-select>>>.el-input__inner {
  background: #145eddcc;
  border: none;
  color: rgb(255, 255, 255);
}

.stbprp-select>>>.el-input--mini .el-input__inner {
  height: 25px;
  line-height: 25px;
}

::v-deep .el-scrollbar__wrap {
  background-color: #0000007a;
}
</style>
